// 封装价格计算的方法：
// 计算总价格，计算总数量,重置页面数据
function totalSum(){
  let totalNum = 0
  let totalPrice = 0
  $('table tr').each((i,item) => {
    if(i === 0) return
    let num = $(item).find('input').val()  //数量
    let price = $(item).find('td:eq(1)').text().substr(1)  //单价
    let temp = parseInt(num) * (parseFloat(price) * 100)
    totalNum += parseInt(num)
    totalPrice += temp
    // console.log(temp,totalPrice,totalNum,num);
    $(item).find('td:eq(3)').text(`￥${temp / 100}`)
  })
  $('.total-price span').html(`<i>¥</i>${totalPrice/100}`)

}

// # 购物车列表
// 1 打开页面请求接口
// 2 拿到接口数据追加页面

// ----用$.get()写：
// let token = localStorage.getItem('token') || '687bfea468b1ec4fe0b9447734d60edc2651'

// $.get(
//   'http://kg.zhaodashen.cn/mt/web/carts/index.jsp',
//   {token:token},
//   res => {
//     console.log(res);
//     let html = `<tr>
//                 <th class="desc">项目</th>
//                 <th class="unit-price">单价</th>
//                 <th class="num">数量</th>
//                 <th class="total-price">总价</th>
//                 <th style="width:46px">操作</th> 
//               </tr>`
//     $.each(res.data,(i,item) => {
//       html += `
//       <tr id="${item.goods_id}">
//         <td class="title">
//           <a href="" data-reactid="12">${item.goods_name}</a>
//           <p>不麻不辣</p>
//         </td>
//         <td>¥${item.shop_price}</td>
//         <td data-reactid="16">
//           <div class="input-number">
//             <button class="minus-btn" type="button">-</button>
//             <input type="text" class="input" value="${item.goods_number}">
//             <button class="plus-btn" type="button">+</button>
//           </div>
//         </td>
//         <td data-reactid="21">¥${item.shop_price * item.goods_number}</td>
//         <td><a href="javascript:;" class="del">删除</a></td>
//       </tr>
//       `
//       $('table tbody').html(html)
//     })
//   },
//   'json'
// )

// ----用$.ajax()写：
let token = localStorage.getItem('token') || '687bfea468b1ec4fe0b9447734d60edc2651'
$.ajax({
  url:'http://kg.zhaodashen.cn/mt/web/carts/index.jsp',
  type:'get',
  headers:{},
  data:{token},
  success: res => {
    let html = `
    <tr>
      <th class="desc">项目</th>
      <th class="unit-price">单价</th>
      <th class="num">数量</th>
      <th class="total-price">总价</th>
      <th style="width:46px">操作</th> 
    </tr>
    `
    $.each(res.data,(i,item) => {
      html +=`
      <tr goods_id="${item.goods_id}">  //淘宝京东会另外加一个max_goodsNum,用来判断商品数量
        <td class="title">
          <a href="" data-reactid="12">${item.goods_name}</a>
          <p>不麻不辣</p>
        </td>
        <td>¥${item.shop_price}</td>
        <td data-reactid="16">
          <div class="input-number">
            <button class="minus-btn" type="button">-</button>
            <input type="text" class="input" value="${item.goods_number}">
            <button class="plus-btn" type="button">+</button>
          </div>
        </td>
        <td data-reactid="21">¥${item.shop_price * item.goods_number}</td>
        <td><a href="javascript:;"class="del">删除</a></td>
      </tr>
      `
    })
    $('table tbody').html(html)
    totalSum()
  },
  error:err => console.log(err),
  dataType:'json',
  async:false,
})

// ----购物车删除数据
// 1获取删除，绑定点击事件（需要用事件委托）
// 2请求接口，失败弹框提示，成功-刷新，或者成功，DOM操作-重新统计价格
$('table tbody').on('click','.del',function(){
  // 具体用get还是post根据后端的接口
  let goods_id = $(this).parents('tr').attr('goods_id')
  $.get(
    'http://kg.zhaodashen.cn/mt/web/carts/delete.jsp',
    {
      token,
      goods_id,
    },
    res => {
        // 判断是否获取到数据
      if(res.meta.state === 200){
        $(this).parents('tr').remove()
        totalSum()   //重新计算价格
        console.log(res);
      } else{
        alert(res.data.state)
      }
    },
    'json'
  )
})

// 购物车商品数量+1(事件委托给+绑定点击事件)
$('table').on('click','.plus-btn',function(){
  let num = $(this).prev().val()
  num++
  let goods_id = $(this).parents('tr').attr('goods_id')
  $.post(
    'http://kg.zhaodashen.cn/mt/web/carts/update.jsp',
    {
      token,
      goods_id,
      buyNum: num
    },
    res => {
      if(res.meta.state === 200){
        // 重置input框里面的内容，重新计算总价
        console.log(res);
        $(this).prev().val(num)
        totalSum() 

      } else{
        // alert(res.meta.state)
        // console.log(res);
        if(res.meta.msg === '库存不足'){
          // 弹框提示，并修改数量为库存最大数量,修改页面信息，重新计算价格
          alert(`【${res.meta.msg}】库存不足，最大购买数量${res.data.total_number}`)
          $.post('http://kg.zhaodashen.cn/mt/web/carts/update.jsp',{token,goods_id,buyNum: res.data.total_number},res => {},'json')
          $(this).prev().val(res.data.total_number)
          totalSum() 
        } else{
          alert('网络繁忙，请刷新后重试')
        }
      }
    },
    'json'
  )
})

// 购物车商品-1 
$('table').on('click','.minus-btn',function(){
  let goods_id = $(this).parents('tr').attr('goods_id')
  let num = $(this).next().val()
  num--
  if(num<1) num = 1
  $.post(
    'http://kg.zhaodashen.cn/mt/web/carts/update.jsp',
    {
      token,
      goods_id,
      buyNum: num
    },
    res => {
      if(res.meta.state === 200){
        // 重置input框里面的内容，重新计算总价
        // console.log(res);
        $(this).next().val(num)
        totalSum() 

      } else{
        console.log(res);
      }
    },
    'json'
  )
})

// 购物车更新 1.input框只能是数字（值改变事件）  2.失去焦点请求接口(失焦事件)
$('table').on('input','.input',function(){
  let num = String($(this).val())
  num = num.replace(/\D/g,'')
  $(this).val(num)  //注意：这里不需要请求接口修改后端数据，在失去焦点时改就行
})

$('table').on('blur','.input',function(){
  let num = parseInt($(this).val())
  if(isNaN(num) || num<1) num = 1
  $(this).val(num)
  let goods_id = $(this).parents('tr').attr('goods_id')
  $.post(
    'http://kg.zhaodashen.cn/mt/web/carts/update.jsp',
    {
      token,
      goods_id,
      buyNum: num
    },
    res => {
      if(res.meta.state === 200){
        // 判断商品数量
        $(this).val(num)
        totalSum() 

      } else{
        // console.log(res);
        if(res.meta.msg === '库存不足'){
          alert(`【${res.meta.msg}】库存不足，最大购买数量${res.data.total_number}`)
          $.post('http://kg.zhaodashen.cn/mt/web/carts/update.jsp',{token,goods_id,buyNum: res.data.total_number},res => {},'json')
          $(this).val(res.data.total_number)
          totalSum() 
        } else{

        }
      }
    },
    'json'
  )
})
